<template>
    <div id="kline_5" style="width: 100%; height: 100%; padding-top: 15px;"></div>
</template>

<script>
import { durationData } from "@/api/msg"
import * as echarts from 'echarts';
export default {
    data(){
        return {
            option: {
                color: ["#5B8FF9", "#69DBAE", "#5070dd", "#b6d634", "#505372", "#ff994d", "#0ca8df"],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                         type: 'shadow'
                    }
                },
                legend: {},
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} min'
                    },
                },
                yAxis: {
                    name : "订单号(后4位)",
                    type: 'category',
                    data: []
                },
                series: [
                    {
                        name: '备货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '取货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '送货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '核销时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [150, 212, 201, 154, 190, 330, 410]
                    }, 
                ]
            }
            
        }
    },
    methods: {
        initCharts(){
            durationData({}).then(res=>{
                let data = res.slice(0, 8)
                let stockingTimeList = []
                let pickUpTimeList = []
                let deliveryTimeList = []
                let writeOffDurationList = []
                let orderList = []
                for(let i=0; i<data.length-1; i++) {
                    stockingTimeList.push(data[i].stockingTime)
                    pickUpTimeList.push(data[i].pickUpTime)
                    deliveryTimeList.push(data[i].deliveryTime)
                    writeOffDurationList.push(data[i].writeOffDuration)
                    orderList.push(data[i].orderNo.slice(-4))
                }
                console.log("orderList", orderList)
                this.option.yAxis.data = orderList
                this.option.series = [
                    {
                        name: '备货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: stockingTimeList
                    },
                    {
                        name: '取货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: pickUpTimeList
                    },
                    {
                        name: '送货时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: deliveryTimeList
                    },
                    {
                        name: '核销时长',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: writeOffDurationList
                    }, 
                ]
                var chartDom = document.getElementById('kline_5');
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option)
            })
        }
    }

}
</script>

<style lang="scss">
    
</style>